<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BetterScroll 导航示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/better-scroll@2.4.0/dist/better-scroll.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            neutral: '#F5F7FA',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .nav-active {
        @apply bg-primary text-white border-l-4 border-white;
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen">
  <div class="container mx-auto px-4 py-8 max-w-6xl">
    <header class="mb-8">
      <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-primary">
        <i class="fa fa-bookmark-o mr-2"></i>内容导航示例
      </h1>
      <p class="text-gray-600 mt-2">点击左侧导航，右侧内容将平滑滚动到对应区域</p>
    </header>

    <div class="flex flex-col md:flex-row gap-6">
      <!-- 左侧导航 -->
      <div class="w-full md:w-64 bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-4 bg-primary text-white">
          <h2 class="font-bold text-lg">内容导航</h2>
        </div>
        <div id="menu-wrapper" class="h-[calc(100vh-180px)] overflow-hidden relative">
          <div id="menu-content" class="py-2">
            <ul id="menu-list">
              <!-- 导航项将通过JavaScript动态生成 -->
            </ul>
          </div>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="flex-1 bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-4 bg-secondary text-white">
          <h2 class="font-bold text-lg">内容区域</h2>
        </div>
        <div id="content-wrapper" class="h-[calc(100vh-180px)] overflow-hidden relative">
          <div id="content" class="p-6 space-y-8">
            <!-- 内容将通过JavaScript动态生成 -->
          </div>
        </div>
      </div>
    </div>

    <footer class="mt-8 text-center text-gray-500 text-sm">
      <p>© 2025 内容导航示例 | 使用 BetterScroll 实现</p>
    </footer>
  </div>

  <script>
    // 示例数据
    const sections = [
      { id: 'section1', title: '第一章：引言', content: '这是第一章的内容。引言部分通常包含背景信息、研究目的和方法概述。在这个示例中，我们将展示如何使用 BetterScroll 实现平滑滚动导航。' },
      { id: 'section2', title: '第二章：基本概念', content: '这是第二章的内容。基本概念部分介绍了 BetterScroll 的核心原理、安装方法和基本配置。了解这些概念对于有效使用 BetterScroll 至关重要。' },
      { id: 'section3', title: '第三章：实现方法', content: '这是第三章的内容。实现方法部分详细讲解了如何在项目中集成 BetterScroll，包括 HTML 结构设计、CSS 样式设置和 JavaScript 代码实现。' },
      { id: 'section4', title: '第四章：高级技巧', content: '这是第四章的内容。高级技巧部分探讨了 BetterScroll 的一些进阶用法，如自定义滚动行为、处理复杂布局和实现高性能滚动效果。' },
      { id: 'section5', title: '第五章：应用案例', content: '这是第五章的内容。应用案例部分展示了几个使用 BetterScroll 的实际项目示例，包括商品列表滚动、长文章阅读和无限滚动加载等场景。' },
      { id: 'section6', title: '第六章：性能优化', content: '这是第六章的内容。性能优化部分讨论了如何优化 BetterScroll 在移动设备上的性能，包括减少重排重绘、优化事件处理和使用硬件加速等技术。' },
      { id: 'section7', title: '第七章：常见问题', content: '这是第七章的内容。常见问题部分收集了使用 BetterScroll 过程中可能遇到的问题及解决方案，帮助开发者快速解决遇到的难题。' },
      { id: 'section8', title: '第八章：未来发展', content: '这是第八章的内容。未来发展部分展望了 BetterScroll 的发展方向和可能的新功能，以及如何与其他前端技术结合使用。' },
      { id: 'section9', title: '第九章：总结', content: '这是第九章的内容。总结部分回顾了整个教程的重点内容，强调了 BetterScroll 在现代 Web 开发中的重要性和应用价值。' },
      { id: 'section10', title: '第十章：附录', content: '这是第十章的内容。附录部分提供了一些额外的资源和参考资料，包括 API 文档、官方教程链接和社区支持渠道。' }
    ];

    // 初始化DOM
    document.addEventListener('DOMContentLoaded', () => {
      const menuList = document.getElementById('menu-list');
      const content = document.getElementById('content');

      // 生成导航和内容
      sections.forEach((section, index) => {
        // 生成导航项
        const listItem = document.createElement('li');
        listItem.className = `px-4 py-3 border-l-4 border-transparent hover:bg-gray-100 cursor-pointer transition-all duration-200 ${index === 0 ? 'nav-active' : ''}`;
        listItem.innerHTML = `<i class="fa fa-bookmark-o mr-2"></i>${section.title}`;
        listItem.setAttribute('data-target', section.id);
        menuList.appendChild(listItem);

        // 生成内容块
        const contentBlock = document.createElement('div');
        contentBlock.className = 'scroll-section';
        contentBlock.id = section.id;
        contentBlock.innerHTML = `
          <h3 class="text-2xl font-bold text-primary mb-4">${section.title}</h3>
          <div class="prose max-w-none">
            <p>${section.content}</p>
            <p>这是一些额外的示例文本，用于填充内容区域，使其足够长以便于滚动。在实际应用中，这里可以是任何类型的内容，如文章、图片、视频等。</p>
            <p>这是一些额外的示例文本，用于填充内容区域，使其足够长以便于滚动。在实际应用中，这里可以是任何类型的内容，如文章、图片、视频等。</p>
          </div>
        `;
        content.appendChild(contentBlock);
      });

      // 初始化 BetterScroll 实例
      const bsContent = new BScroll('#content-wrapper', {
        click: true,
        scrollbar: {
          fade: true,
          interactive: true
        },
        probeType: 3
      });

      const bsMenu = new BScroll('#menu-wrapper', {
        click: true,
        scrollbar: {
          fade: true,
          interactive: true
        }
      });

      // 导航项点击事件
      document.querySelectorAll('#menu-list li').forEach(item => {
        item.addEventListener('click', () => {
          // 更新导航项状态
          document.querySelectorAll('#menu-list li').forEach(li => {
            li.classList.remove('nav-active');
          });
          item.classList.add('nav-active');

          // 获取目标元素
          const targetId = item.getAttribute('data-target');
          const targetElement = document.getElementById(targetId);

          if (targetElement) {
            // 滚动到目标位置
            bsContent.scrollToElement(targetElement, 500, {
              easing: {
                style: 'cubic-bezier(0.16, 1, 0.3, 1)',
                fn: function(t) {
                  // 自定义缓动函数 - 缓入缓出
                  if ((t /= 0.5) < 1) return 0.5 * t * t * t;
                  return 0.5 * ((t -= 2) * t * t + 2);
                }
              }
            });
          }
        });
      });

      // 监听内容区域滚动，更新导航高亮
      bsContent.on('scroll', (pos) => {
        let currentSectionId = '';
        let minDistance = Infinity;

        sections.forEach(section => {
          const element = document.getElementById(section.id);
          if (element) {
            const rect = element.getBoundingClientRect();
            const distance = Math.abs(rect.top - 80); // 80是一个偏移量，可以根据实际情况调整

            if (distance < minDistance) {
              minDistance = distance;
              currentSectionId = section.id;
            }
          }
        });

        // 更新导航高亮
        if (currentSectionId) {
          document.querySelectorAll('#menu-list li').forEach(li => {
            li.classList.remove('nav-active');
            if (li.getAttribute('data-target') === currentSectionId) {
              li.classList.add('nav-active');
              
              // 确保当前激活的导航项在可视区域内
              const activeItem = li;
              const activeItemRect = activeItem.getBoundingClientRect();
              const menuWrapperRect = document.getElementById('menu-wrapper').getBoundingClientRect();
              
              if (activeItemRect.top < menuWrapperRect.top) {
                bsMenu.scrollToElement(activeItem, 300);
              } else if (activeItemRect.bottom > menuWrapperRect.bottom) {
                bsMenu.scrollToElement(activeItem, 300);
              }
            }
          });
        }
      });
    });
  </script>
</body>
</html>  